<template>
  <div v-if="current">
    <div>{{ current.label }}</div>
    <el-form label-width="120px"
             :model="styles">
      <el-form-item v-for="formItem in form"
                    :key="formItem.key"
                    :label="formItem.label">
        <component v-model="styles[formItem.key]"
                   :is="formItem.component"
                   :current="current" />
      </el-form-item>
    
    </el-form>
  </div>
</template>

<script>
import locConfig from '../config-item/loc-config/loc-config'
import imgConfig from '../config-item/img-config/img-config'
import sizeConfig from '../config-item/size-config/size-config.vue'

export default {
  props: {
    current: {
      type: Object,
      default () {
        return null;
      },
    },
    form: {
      type: Array,
      default () {
        return [];
      },
    },
  }, components: {
    locConfig,//位置配置
    imgConfig,//图片地址配置
    sizeConfig,//大小配置
  },
  watch: {
    current (newVal) {
      if (newVal) {
        this.styles = newVal.styles;
      }
    },
  },
  data () {
    return {
      styles: {},
    };
  },
}
</script>

<style  scoped>

</style>